<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!--Inicia la composicion de la pagina en la plantilla-->
    <ui:composition template="/resource/template/plantilla.xhtml">

        <!--Segmento que define el contenido del header-->
        <ui:define name="head">
            <h:head>
                <f:loadBundle basename="university.location.label_#{logged.loggedIdiom}" var="label" />
                <f:loadBundle basename="university.location.message_#{logged.loggedIdiom}" var="message" />
                <f:loadBundle basename="university.location.help_#{logged.loggedIdiom}" var="help" />
                <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"/>

                <style type="text/css">
                    html { height: 100% }
                    body { height: 100%; margin: 0; padding: 0 }
                    #map_canvas { height: 100% }
                </style>

                <script type="text/javascript">
                    var marker;
                    var map;
                    var vzoom = 15;

                    function initialize() {
                        var myLatlngInit = new google.maps.LatLng(8.932509021104444, -79.8275537603455);
                        var myLatlng = new google.maps.LatLng(#{university_location.lat}, #{university_location.lng});

                        if (myLatlng.toString() == myLatlngInit.toString()) {
                            vzoom = 7;
                        }

                        var myOptions = {
                            center: myLatlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            zoom: vzoom
                        };
                        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                        marker = new google.maps.Marker({position: myLatlng, map: map});

                        google.maps.event.addListener(map, 'click', function(event) {
                            if (marker) {
                                marker.setPosition(event.latLng);
                            } else {
                                marker = new google.maps.Marker({
                                    position: event.latLng,
                                    map: map
                                });
                            }
                            $('#form1\\:lat').val(event.latLng.lat());
                            $('#form1\\:lng').val(event.latLng.lng());
                        });
                    }
                </script>  
                <script>
                    $(function() {
                        $("#form1\\:id_universidad").mousedown(function() {
                            $("#form1\\:provincia").val();
                            $("#form1\\:distrito").val();
                        });
                    });
                </script>
                <script>
                    $(function() {
                        $("#form1\\:pais").mousedown(function() {
                            $("#form1\\:provincia").val();
                            $("#form1\\:distrito").val();
                        });
                    });
                </script>
                <script>
                    $(function() {
                        $("#form1\\:provincia").mousedown(function() {
                            $("#form1\\:distrito").val();
                            $("#form1\\:corregimiento").val();
                        });
                    });
                </script>
                <script>
                    $(function() {
                        $("#form1\\:distrito").mousedown(function() {
                            $("#form1\\:corregimiento").val();
                        });
                    });
                </script>
                <script>
                    function verificar(dato)
                    {
                        var agree = confirm(dato);
                        if (agree)
                            return true;
                        else
                            return false;
                    }
                </script>
            </h:head>
        </ui:define>

        <!--Segmento que define el contenido de la pagina-->
        <ui:define name="content">
            <h:body onload="initialize()">
                <h:outputText value="#{message.m0}" class="label" rendered="#{!access.visit}"/>
                <h:form id="form1" rendered="#{access.visit}">
                    <p:growl id="messages" showDetail="true"/>  
                    <h:panelGroup>
                        <div class="field">
                            <!--PAIS-->
                            <h:outputText value="#{label.field2}"  class="label"  />
                            <h:selectOneMenu id="pais" value="#{university_location.countryBeans.id}" valueChangeListener="#{university_location.selectedCountry}" onchange="submit()" required="#{param['required']=='true'}" requiredMessage="#{message.m22}" >
                                <f:selectItem itemLabel="" itemValue=""/>
                                <f:selectItems value="#{location_countryFind.listItem()}"/>  
                            </h:selectOneMenu>
                            <h:commandButton id="btnPais" class="addButton" value="#{label.button7}" onclick="addPais.show();" type="button"/>
                            <p:dialog id="addPais" widgetVar="addPais" header="#{label.title2}" modal="true" resizable="false">
                                <h:inputText value="#{university_location.countryBeans.nombre}" class="textfield"/>
                                <h:commandButton value="#{label.button1}" class="button"  actionListener="#{university_location.insertCountry}" onclick="addPais.hide();"/>
                            </p:dialog>
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <!--PROVINCIA-->
                            <h:outputText value="#{label.field3}"  class="label" />
                            <h:selectOneMenu id="provincia" value="#{university_location.provinceBeans.id}" valueChangeListener="#{university_location.selectedProvince}" onchange="submit()" required="#{param['required']=='true'}" requiredMessage="#{message.m23}">
                                <f:selectItem itemLabel="" itemValue=""/>
                                <f:selectItems value="#{location_provinceFind.listItem(university_location.countryBeans.id)}" /> 
                            </h:selectOneMenu>
                            <h:commandButton value="#{label.button7}" class="addButton" onclick="addProvincia.show();" type="button"/>
                            <!--Dialogos para la insertcion de provincia-->
                            <p:dialog id="addProvincia" widgetVar="addProvincia" header="#{label.title3}" modal="true" resizable="false">
                                <h:inputText value="#{university_location.provinceBeans.nombre}" class="textfield"/>
                                <h:commandButton value="#{label.button1}" class="button"  actionListener="#{university_location.insertProvince}" onclick="addProvincia.hide();"/>
                            </p:dialog>
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <!--DISTRITO-->
                            <h:outputText value="#{label.field4}"  class="label"  />
                            <h:selectOneMenu id="distrito" value="#{university_location.districtBeans.id}" valueChangeListener="#{university_location.selectedDistric}" onchange="submit()" required="#{param['required']=='true'}" requiredMessage="#{message.m24}" >
                                <f:selectItem itemLabel="" itemValue=""/>
                                <f:selectItems value="#{location_districtFind.listItem(university_location.provinceBeans.id)}" /> 
                            </h:selectOneMenu>
                            <h:commandButton value="#{label.button7}" class="addButton"  onclick="addDistrito.show();" type="button"/>
                            <!--Dialogos para la insertcion de distrito-->
                            <p:dialog id="addDistrito" widgetVar="addDistrito" header="#{label.title4}" modal="true" resizable="false">
                                <h:inputText value="#{university_location.districtBeans.nombre}" class="textfield"/>
                                <h:commandButton value="#{label.button1}" class="button" actionListener="#{university_location.insertDistrict}" onclick="addDistrito.hide();"/>
                            </p:dialog>
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <!--CORREGIMIENTO-->
                            <h:outputText value="#{label.field5}"  class="label"  />
                            <h:selectOneMenu id="corregimiento" value="#{university_location.id_Corregimiento}" valueChangeListener="#{university_location.selectedTownship}" onchange="submit()"
                                             required="#{param['required']=='true'}" requiredMessage="#{message.m26}">
                                <f:selectItem itemLabel="" itemValue=""/>
                                <f:selectItems value="#{location_townshipFind.listItem(university_location.districtBeans.id)}" /> 
                            </h:selectOneMenu>
                            <h:commandButton value="#{label.button7}" class="addButton"  onclick="addCorregimiento.show();" type="button"/>
                            <!--Dialogos para la insertcion de corrregimiento-->
                            <p:dialog id="addCorregimiento" widgetVar="addCorregimiento" header="#{label.title5}" modal="true" resizable="false">
                                <h:inputText value="#{university_location.townshipBeans.nombre}" class="textfield"/>
                                <h:commandButton value="#{label.button1}" class="button"  actionListener="#{university_location.insertTownship}" onclick="addCorregimiento.hide();"/>
                            </p:dialog>
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <h:outputText value="#{label.field6}"  class="label" />
                            <h:inputText value="#{university_location.nombre}" class="textfield" required="#{param['required']=='true'}" requiredMessage="#{message.m26}" />
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <h:outputText value="#{label.field7}"  class="label" />
                            <h:inputText value="#{university_location.direccion}" class="textfield" required="#{param['required']=='true'}" requiredMessage="#{message.m27}" />
                            <h:outputText class="required" value="*"/>
                        </div>

                        <div class="field">
                            <!--CORDENADAS DE MAPA-->
                            <h:outputText value="#{label.field8} "  class="label" />
                            <h:commandButton value="#{label.button7}"  class="addButton"  onclick="mapa.show();" type="button"/>
                            <!--Dialogo del Mapa de Google -->
                            <p:dialog id="mapa" widgetVar="mapa" modal="true" header="Google Maps" height="500" width="500">
                                <div id="map_canvas" style="width:100%; height:100%"></div>
                            </p:dialog>
                        </div>
                        <h:inputHidden id="lat" value="#{university_location.lat}"/>
                        <h:inputHidden id="lng" value="#{university_location.lng}"/>
                        <!--INSERTAR-->
                        <h:commandButton value="#{label.button1}" class="button" action="#{university_location.insert}" onclick="return verificar('#{message.m7}')">
                            <f:param name="required" value="true"/> 
                        </h:commandButton>
                        <!--ACTUALIZAR-->
                        <h:commandButton value="#{label.button2}" class="button" action="#{university_location.update}" onclick="return verificar('#{message.m8}')">
                            <f:param name="required" value="true"/>
                        </h:commandButton>
                        <!--ELIMINAR-->
                        <h:commandButton value="#{label.button3}" class="button" action="#{university_location.delete}" onclick="return verificar('#{message.m9}')">
                            <f:param name="required" value="true"/> 
                        </h:commandButton>
                        <!--LIMPIAR-->
                        <h:commandButton value="#{label.button4}" class="button" action="#{university_location.clear}" />
                    </h:panelGroup>
                </h:form>
                <h:form>
                    <c:set var="list" value="#{university_locationFind.listByLoggedId}"/>
                    <h:panelGroup layout="block" class="tableWrapper" rendered="#{not empty list}">
                        <h:dataTable id="dataTable" var="p" value="#{list}" class="dataTable">
                            <h:column >
                                <f:facet name="header">#{label.field}</f:facet>
                                <h:commandLink styleClass="editButton" actionListener="#{university_location.selectedTempId(p.id)}" />
                            </h:column>
                            <h:column > 
                                <f:facet name="header">#{label.field1}</f:facet>  
                                <h:outputText value=" #{p.universityBeans.nombre}  "/>
                            </h:column>
                            <h:column >
                                <f:facet name="header">#{label.field6}</f:facet>  
                                <h:outputText value=" #{p.nombre}  "/>
                            </h:column>
                            <h:column >
                                <f:facet name="header">#{label.field7}</f:facet>  
                                <h:outputText value=" #{p.direccion}  "/>
                            </h:column>
                        </h:dataTable>
                    </h:panelGroup>
                </h:form>
            </h:body>
        </ui:define>
        <ui:define name="slideHelper">
            <h3>#{help.title1}</h3>
            #{help.detail1a}
            <p>
                #{help.title2}
                <ul>
                    <li>#{help.detail2a} </li>
                </ul>
            </p>
            <p>
                #{help.title3}
                <ul>
                    <li>#{help.detail3a} </li>
                    <li>#{help.detail3b} </li>
                    <li>#{help.detail3c} </li>
                </ul>
            </p>
        </ui:define>   
    </ui:composition>
</html>